/**
* @description: 设备列表 
**/
<template>
  <view class="todo-task-main">

    <nav-bar class="header" back :title="title" @goBack="goBack">
      <template slot="iconfont">
        <van-icon v-if="!isView" name="plus" class="add-btn" @click="deviceAdd" />
      </template>
    </nav-bar>
    <view class="main-container">

      <template v-if="taskList.length>0">
        <van-list v-model="isLoading" :finished="finished" @load="loadMore" class="task-list" style="">
          <!-- 列表循环   -->
          <view class="todo-list" v-for="(item,index) in taskList" :key="index" @click="toReceive(item)">
            <view class="top-todo-main">
              <text class="todo-big-ltitle">电源设备类型:</text>
              <text class="todo-small-ltitle">{{ item.name }}</text>
            </view>
            <view class="top-todo-main">
              <text class="todo-big-ltitle">巡视时间:</text>
              <text class="todo-small-ltitle">{{item.time}}</text>
            </view>
          </view>
        </van-list>
      </template>
      <van-button v-if="!isView" block @click="saveDevice">提交</van-button>

    </view>

  </view>
</template>

<script>
import navBar from '../../../components/common/nav-bar'

import moment from 'moment'
import { mapGetters } from 'vuex'
import { Dialog } from 'vant'

export default {
  name: 'todoTask',
  components: { navBar },
  data() {
    return {
      isView: false,
      taskInfoData: [],
      patrolList: [],
      title: '设备列表',
      currentTab: 'finish',
      taskStae: 2,
      taskSiteId: '', // 巡视进度跳转携带站点id
      taskSiteName: '', // 巡视进度跳转携带站点名称

      searchValue: '',
      showScreen: false,
      showSearch: false,
      taskList: [
        { name: 'ATS', time: '2023-11-04' },
        { name: 'STS', time: '2023-11-05' }
      ],
      refreshing: false, // 是否正在刷新
      isLoading: false,
      finished: true,
      total: 0, // 总条数
      page: 1,
      limit: 20,
      originFlag: false //  true 个人中心管理进来的  false 待办工单进来的
    }
  },
  onLoad(e) {
    // this.originFlag = e.origin&&e.origin=='mine'?true:false
    this.isView = e.s == 1 ? true : false
  },
  computed: {
    ...mapGetters(['userData'])
  },
  methods: {
    saveDevice() {
      uni.navigateTo({
        url: `/pages/inspectionMeeting/index?s=${this.isView ? 1 : 0}`
      })
    },
    goBack() {
      uni.navigateTo({
        url: `/pages/inspectionMeeting/index?s=${this.isView ? 1 : 0}`
      })
    },
    deviceAdd() {
      uni.navigateTo({
        url: `/pages/inspectionMeeting/deviceList/form?s=${this.isView ? 1 : 0}`
      })
    },
    toReceive(item) {
      uni.navigateTo({
        url: `/pages/inspectionMeeting/deviceList/form?s=${this.isView ? 1 : 0}`
      })
    },
    getTaskListByTodoT() {
      let params = {
        userId: this.userData.userId,
        pageSize: this.limit,
        pageCurr: this.page,
        taskState: this.taskStae,
        name: this.searchValue,
        interfaceType: 1
      }
      this.$apiRequest.qjqcApi
        .getAutumnInspectionTaskListInfo(params)
        .then(res => {
          this.isLoading = false
          this.refreshing = false

          this.taskList = this.taskList.concat(
            res.data.list.map(item => {
              return {
                tmsStartTimS: item.tmsStartTim
                  ? moment(item.tmsStartTim).format('YYYY-MM-DD HH:mm')
                  : null,
                tmsEndTimS: item.tmsEndTim
                  ? moment(item.tmsEndTim).format('YYYY-MM-DD HH:mm')
                  : null,
                ...item
              }
            })
          )

          if (this.taskStae === 2) {
            this.total = res.data.num.noFinshNum
          } else {
            this.total = res.data.num.finshNum
          }
        })
    }
  }
}
</script>

<style scoped lang="scss">
.todo-task-main {
  .header {
    position: sticky;
    top: 0;
    z-index: 9;
  }
  .add-btn {
    margin-right: px2vw(42);
    font-weight: bold;
  }
  .main-container {
    min-height: calc(100vh - #{px2vh(283)});
    padding: px2vh(30) auto px2vw(30);
    padding-top: px2vh(30);
    background-color: #f8f8f8;
    .task-list {
      min-height: calc(100vh - #{px2vh(483)});
      overflow: auto;
    }
    /deep/.van-field__label,
    /deep/.van-field__control,
    /deep/.van-field__control:read-only {
      font-size: px2vw(42);
    }
    .plate-title-1 {
      margin-top: px2vh(30);
      margin-bottom: px2vh(27);
    }
    .task-info-container {
      border-radius: $border-radius-base;
      overflow: hidden;
      background-color: #ffffff;

      .operation {
        margin-left: px2vw(30);
        img {
          width: px2vw(28);
          height: px2vh(41);
          vertical-align: middle;
        }
      }
    }
    .plate-title-2 {
      margin-top: px2vh(60);
      margin-bottom: px2vh(27);
    }
    .patrol-info-container .patrol-item {
      width: px2vw(1020);
      //height: px2vh(313);
      background: #fff;
      border-radius: $border-radius-base;
      overflow: hidden;
      margin-bottom: px2vh(30);
      padding-bottom: px2vh(30);
      .progesss-top {
        //width: px2vw(920);
        height: px2vh(172);
        margin: 0 px2vw(50);
        display: flex;
        justify-content: space-between;
        align-items: center;
        .progess-left {
          display: flex;
          align-items: center;

          img {
            width: px2vw(68);
            height: px2vw(68);
            //margin-top: px2vh(55);
            //float:left;
          }

          .progess-title {
            color: #666;
            //float: left;
            font-size: px2vw(42);
            margin-left: px2vw(20);
            //margin-top: px2vh(58);
            //line-height: px2vh(62);
          }
        }
        .progess-right {
          //width: px2vw(258);
          font-size: px2vw(42);
          //line-height: px2vh(62);
          //margin-top: px2vh(55);
          //float: right;
          display: flex;
          align-items: center;
          .patrol-btn {
            margin-left: px2vw(30);
            padding: 0 6px;
            width: px2vw(160);
            height: px2vh(68);
            background: #417adc;
            //float: right;
            border-radius: px2vw(40) px2vh(40);
          }
          .patrol-btn:not(:first-child) {
            margin-left: px2vw(10);
          }
        }
        .processColor {
          color: #ff4355;
        }
        .processColor2 {
          color: #ffad0e;
        }
      }
      .progess-hr {
        width: px2vw(920);
        border: px2vh(1) solid #e5e5e5;
        margin-left: px2vw(40);
      }
      .progesss-bottom {
        width: px2vw(920);
        margin-left: px2vw(50);
        //height: px2vh(138);
        font-size: px2vw(36);
        display: flex;
        padding: px2vh(30) 0 0;
        .progress-title {
          width: px2vw(190);
          display: inline-block;
          //margin-top: px2vh(58);
          color: #666;
        }
        .progress-main {
          flex: 1;
          display: inline-block;
          //margin-top: px2vh(58);
          color: #333;
        }
      }
    }

    .header-bar {
      flex-shrink: 0;
      // height: px2vh(220);
      background: #417adc;
      overflow: hidden;
      margin-top: px2vh(-1);
      position: sticky;
      top: px2vh(158);
      z-index: 9;
      .get-state-tab {
        width: calc(100% - #{px2vw(60)});
        height: px2vh(90);
        border-radius: px2vw(20);
        box-sizing: border-box;
        margin: px2vh(20) px2vw(30) px2vh(20);
        background-color: rgba(255, 255, 255, 0.4);
        display: flex;
        justify-content: center;
        align-items: center;
        border: px2vw(1) solid rgba(198, 215, 245, 1);
        .info-tab-item {
          width: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          color: rgba(255, 255, 255, 1);
          font-weight: bold;
          font-size: px2vw(38);
          &.info-tab-current {
            height: px2vh(80);
            margin: 0 px2vw(4);
            margin-right: px2vw(10);
            border-radius: px2vw(20);
            background-color: rgba(255, 255, 255, 0.7);
            color: rgba(65, 122, 220, 1);
            font-weight: Bold;
          }
        }
      }
    }

    .todo-list {
      width: px2vw(1020);
      //height: px2vh(520);
      background: #fff;
      border-radius: px2vw(20) px2vh(20);
      padding-top: px2vw(30);
      padding-bottom: px2vw(30);
      margin: 0 px2vw(30) px2vh(30) px2vw(30);
      .todo-title {
        width: px2vw(940);
        height: px2vh(80);
        margin-left: px2vw(40);
        padding-top: px2vw(30);
        margin-bottom: px2vh(30);
        img {
          width: px2vw(64);
          height: px2vw(64);
          margin-top: px2vh(12);
          float: left;
        }
        .todo-main-title {
          width: px2vw(600);
          margin-left: px2vw(20);
          margin-top: px2vh(8);
          font-size: px2vh(48);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          float: left;
        }
        .todo-btn {
          width: px2vw(170);
          height: px2vh(60);
          line-height: px2vh(60);
          text-align: center;
          margin-top: px2vh(12);
          background: #417adc;
          color: #fff;
          font-size: px2vw(42);
          float: right;
          border-radius: px2vw(20) px2vh(20);
        }
      }
      .todo-hr {
        width: px2vw(940);
        border: px2vh(1) solid #e5e5e5;
        margin-left: px2vw(40);
        margin-bottom: px2vh(42);
      }
      .top-todo-main {
        width: px2vw(900);
        font-size: px2vh(36);
        line-height: px2vh(62);
        margin-left: px2vw(60);
        .todo-big-ltitle,
        .todo-big-rtitle {
          color: #666;
        }
        .todo-small-ltitle,
        .todo-small-rtitle {
          margin-left: px2vw(25);
          color: #333;
        }
        .todo-big-rtitle {
          margin-left: px2vw(245);
        }
      }
    }
  }

  /deep/ .van-field__label {
    width: 9em;
  }
  /deep/.van-button {
    width: calc(100% - #{px2vw(60)});
    margin: px2vh(50) auto px2vh(71);
    height: px2vh(120);
    color: #fff;
    background-color: #417adc;
    border: 1px solid #417adc;
    border-radius: px2vh(60);
  }
}
</style>